<template>
  <el-dialog draggable :title="realDevice.DeviceName" v-model="dialogVisible" width="70%" @open="onOpening"
    @close="onClosing">
    <div class="m-20">
      <el-descriptions title="实时数据" :border="true">
        <template #extra>
          <el-button type="primary" @click="getDeviceData" plain>刷新</el-button>
        </template>
        <el-descriptions-item v-for="item in realData" :label="item.Description">{{ item.Value }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="mt-20" title="指令下发"></el-descriptions>
      <!-- 给出一个Select组件让用户选择要执行的Action，选项来源actionList -->
      <el-form inline label-width="120px">
        <el-form-item label="指令类型">
          <el-select v-model="action" placeholder="请选择" style="width: 190px;" @change="actionChange">
            <el-option v-for="item in actionList" :key="item.Name" :label="item.Name" :value="item.Name">
            </el-option>
          </el-select>
          <span class="ml-20">{{ currActionObj.Description }}</span>
        </el-form-item>
      </el-form>
      <!-- 根据actionList选择，动态生成一个表单，表单内容由actionList的Parameters决定 -->
      <el-form ref="form" :model="form" inline label-width="120px" style="margin-top: 10px;">
        <el-form-item v-for="item in currActionObj.Parameters" :key="item.Name" :label="item.Description">
          <el-input-number v-if="item.Type == 'Int'" v-model="form[item.Name]" :precision="0"></el-input-number>
          <el-input-number v-else-if="item.Type == 'Decimal'" v-model="form[item.Name]"
            :precision="3"></el-input-number>
          <el-select style="width: 190px;" v-else-if="item.Type == 'Select'" v-model="form[item.Name]" clearable>
            <el-option v-for="item in item.Options" :key="item.Value" :label="item.Label" :value="item.Value">
            </el-option>
          </el-select>
          <el-input v-else v-model="form[item.Name]"></el-input>
        </el-form-item>
        <!--提交按钮-->
        <el-form-item v-if="currActionObj.Name" label=" ">
          <el-button type="primary" :loading="btnLoading" @click="confirm">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  computed: {
  },
  data: function () {
    return {
      deviceId: null,
      btnLoading: false,
      dialogVisible: false,
      realDevice: {},
      realData: [],
      actionList: [],
      siteList: [],
      action: null,
      currActionObj: {},
      form: {},
      rules: {},
      timer: null,
    }
  },
  watch: {},
  methods: {
    openDialog(id) {
      this.deviceId = id;
      this.dialogVisible = true;
    },
    clearData() {
      this.realDevice = {}
      this.realData = {}
      this.actionList = []
      this.action = null
      this.form = {}
      this.currActionObj = {}
    },
    getDeviceData(auto) {
      if (this.timer != null) {
        clearTimeout(this.timer)
      }
      this.http.get(this.$api.MdsCommon + 'GetMdsDeviceData', {
        RealDeviceId: this.deviceId
      }).then((r) => {
        this.realDevice = r.Device
        this.realData = r.Data
        if (!auto) {
          this.actionList = r.Actions
          this.geiDevicePosition()
        }
      }).finally(() => {
        this.timer = setTimeout(() => {
          this.getDeviceData(true)
        }, 2000)
      })
    },
    geiDevicePosition() {
      this.http.get('api/Mds_LogisticSiteAlias/GetSiteOptionsByRealDeviceId', {
        MachineId: this.realDevice.MachineId
      }).then((r) => {
        this.siteList = r
      })
    },
    actionChange() {
      this.currActionObj = {}
      let action = this.actionList.find(x => x.Name == this.action)
      if (!!action) {
        this.currActionObj = action
        if (this.currActionObj.Parameters.length > 0) {
          for (let i = 0; i < this.currActionObj.Parameters.length; i++) {
            let item = this.currActionObj.Parameters[i]
            if (item.Name.toLowerCase() == 'start' || item.Name.toLowerCase() == 'end') {
              let options = []
              if (item.Type == 'Int') {
                options = this.siteList.map(x => ({
                  Value: parseInt(`${x.SiteCodeAlias}`),
                  Label: `${x.SiteCodeAlias}.${x.SiteName}`
                }))
                options.sort((a, b) => a.Value - b.Value)
              } else {
                options = this.siteList.map(x => ({
                  Value: `${x.SiteCodeAlias}`,
                  Label: `${x.SiteCodeAlias}.${x.SiteName}`
                }))
                options.sort((a, b) => a.Value > b.Value)
              }
              item.Type = 'Select'
              item.Options = options
            }
          }
        }
      }
    },
    async confirm() {
      if (!this.currActionObj) return this.$message.error('请选择指令类型')
      this.btnLoading = true
      this.http.post(this.$api.MdsCommon + 'ExecuteMdsDeviceAction', {
        RealDeviceId: this.deviceId,
        MethodName: this.currActionObj.ActionName,
        Arguments: this.currActionObj.Parameters.map(x => this.form[x.Name])
      }).then((r) => {
        this.$message.warning(`操作响应结果：${JSON.stringify(r)}`)
        this.action = null
        this.form = {}
        this.currActionObj = {}
      }).finally(() => {
        this.btnLoading = false
      })
    },
    onOpening() {
      this.clearData()
      this.getDeviceData()
    },
    onClosing() {
      if (this.timer != null) {
        clearTimeout(this.timer)
      }
    }
  },
  created() {
  },
  activated() { },
  mounted() { },
}
</script>
<style lang="scss" scoped></style>
